<template>
	<view class="cisa">
		<view class="cisaBar">
			<image class="cisaBarImg" src="https://www.zzzsyh.com/applets/agent/agent/bar.png" mode=""></image>
			<text class="cisaBarTxt">
				请您勾选发放鉴定的产品
			</text>
		</view>
		<view class="cisaMain">
			<uni-grid :showBorder="false" :column="2">
				<uni-grid-item v-for="(item, index) of list" :key="index">
					<view class="cisaMainLi" @click="cli_li(item, index)">
						<view class="cisaMainLiImgBox">
							<image class="cisaMainLiImg" :src=item.parts_images mode=""></image>
							<image v-if="item.show" class="cisaMainLiImg-check"
								src="https://www.zzzsyh.com/applets/agent/agent/check_red.png" mode=""></image>
						</view>
						<view class="cisaMainLiTxt">
							{{item.parts_name}}
						</view>
					</view>
				</uni-grid-item>
			</uni-grid>
		</view>
		<view class="cisaBtn">
			<view class="cisaBtnLeft font_blod">
				<text v-if="isTrue" @click="cli_allNo">全不选</text>
				<text v-else @click="cli_allOk">全选</text>
			</view>
			<view class="cisaBtnBox font_blod" @click="cli_ok">
				匹配鉴定权
			</view>
		</view>
	</view>
</template>

<script>
	import allapi from '../api/index.js'
	export default {
		data() {
			return {
				storeId: '',
				list: []
			}
		},
		onLoad(val) {
			this.storeId = val.id
		},
		computed: {
			isTrue() {
				let flag = true;
				let list = this.list
				list.forEach(item => {
					if (item.show == '' || item.show == false) {
						flag = false;
					}
				})
				return flag;
			}
		},
		mounted() {
			this.getPartsListCheckByStoreId(this.storeId)
		},
		methods: {
			// 点击全选全不选
			cli_allOk () {
				let list = this.list
				list.map(item => {
					item.show = true
				})
				this.list = list
			},
			cli_allNo () {
				let list = this.list
				
				list.map(item => {
					item.show = false
				})
				this.list = list
			},
			// 点击勾选产品
			cli_li(item, index) {
				item.show = !item.show
			},
			// 点击匹配鉴定权按钮
			cli_ok() {
				let list = this.list
				let _that = this
				if (list.length > 0) {
					let dat = list.filter((item) => {
						return item.show == true
					})
					let ids = ''
					for (let i = 0; i < dat.length; i++) {
						if (i == 0) {
							ids = dat[i].id
						} else {
							ids += ',' + dat[i].id
						}
					}
					console.log(ids);
					_that.savePartsCheck(ids)
				} else {
					uni.showToast({
						title: '请先勾选发放鉴定权的产品',
						icon: 'none'
					})
				}

			},
			// 匹配鉴定权 提交
			savePartsCheck(partsIds) {
				uni.request({
					url: allapi.savePartsCheck,
					data: {
						storeId: this.storeId,
						partsIds: partsIds
					},
					success: (res) => {
						console.log(res);
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
						if (res.data.code == 0) {
							setTimeout(function() {
								uni.navigateBack()
							}, 1000)
						}
					}
				})
			},
			// 获取匹配鉴定权产品列表
			getPartsListCheckByStoreId(storeId) {
				uni.request({
					url: allapi.getPartsListCheckByStoreId,
					data: {
						storeId: storeId
					},
					success: (res) => {
						console.log(res);
						let dat = res.data.data
						let list = []
						dat.map((item, index) => {
							let datval = item.isCheck == 0 ? false : true
							list.push(
								Object.assign({}, item, {
									show: datval
								})
							)
						})

						this.list = list
					}
				})
			}
		}
	}
</script>

<style scoped>
	.cisa {
		position: absolute;
		width: 100%;
		height: 100%;
		background: #FFFFFF;
		display: flex;
		flex-direction: column;
	}

	.cisaBar {
		height: 72rpx;
		background: #FFF3DD;
		display: flex;
		align-items: center;
	}

	.cisaBarImg {
		width: 58rpx;
		height: 58rpx;
		margin-left: 32rpx;
	}

	.cisaBarTxt {
		font-size: 28rpx;
		font-weight: 400;
		color: #FF9E02;
		margin-left: 18rpx;
	}

	.cisaMain {
		flex: 1;
		overflow: auto;
	}

	.cisaMainLi {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

	.cisaMainLiImgBox {
		width: 192rpx;
		height: 192rpx;
		position: relative;
		margin-bottom: 24rpx;
	}

	.cisaMainLiImg {
		width: 192rpx;
		height: 192rpx;
		border-radius: 12rpx;
		background: #EEEEEE;
	}

	.cisaMainLiImg-check {
		width: 48rpx;
		height: 48rpx;
		position: absolute;
		right: -20rpx;
		top: -20rpx;
	}

	.cisaMainLiTxt {
		font-size: 28rpx;
		font-weight: 400;
		color: #333333;
	}

	.cisaBtn {
		height: 96rpx;
		margin-bottom: 30rpx;
		display: flex;
		align-items: center;
		padding-bottom: calc(env(safe-area-inset-bottom) + 20rpx);
	}

	.cisaBtnLeft {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #000000;
		font-size: 36rpx;
	}

	.cisaBtnBox {
		width: 504rpx;
		margin-right: 40rpx;
		height: 92rpx;
		background: linear-gradient(180deg, #F27E75 0%, #E22F48 100%);
		border-radius: 46rpx;
		font-size: 32rpx;
		color: #FFFFFF;
		line-height: 92rpx;
		text-align: center;
	}
</style>
